<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>部门管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="/static/favicon.ico">
    <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css?v=4.1.0" rel="stylesheet">

    <link rel="stylesheet" href="/static/plugins/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-validator/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/static/plugins/treegrid/jquery.treegrid.css">
    <!-- Latest compiled and minified CSS -->
    <style>
        /* ibox 背景 */
        .ibox-blue > .ibox-title {
            border-color: rgb(57, 174, 245);
        }

        .form-control:focus,
        .single-line:focus {
            border-color: #0e9aef !important;
        }

        .checkbox-inline {
            line-height: 5px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins ibox-blue">
        <div class="ibox-title">
            <h5>部门管理</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">

            <div class="row row-lg">
                <div class="example" style="margin-top: -10px;">
                    <div class="btn-group hidden-xs" id="toolbar" role="group">
                        <button type="button" class="btn btn-outline btn-default" id="addeButton">
                            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                            添加
                        </button>
                        <button type="button" class="btn btn-outline btn-default" id="updateButton">
                            <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
                            修改
                        </button>
                        <button type="button" class="btn btn-outline btn-default" id="deleteButton">
                            <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            删除
                        </button>
                    </div>

                    <table id="targetTable" data-mobile-responsive="true" data-click-to-select="true">
                        <thead>
                        <tr>
                            <th data-field="selectItem" data-checkbox="true"></th>
                        </tr>
                        </thead>
                    </table>

                </div>
            </div>

        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="addModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="addForm" class="form-horizontal" autocomplete="off">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">新增部门</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="name" placeholder="请输入部门名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">排序码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sort_code" placeholder="请输入排序码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">上级部门</label>
                        <div class="col-sm-10">
                            <input type="hidden" class="form-control" name="parent_id">
                            <input type="text" class="form-control" id="parent_name" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-10">
                            <div class="ui-radio ui-radio-primary">
                                <label>
                                    <input type="radio" name="status" value="1">
                                    <span>启用</span>
                                </label>
                                <label>
                                    <input type="radio" name="status" value="0">
                                    <span>禁用</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success">提交</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="updateModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="updateForm" class="form-horizontal" autocomplete="off">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">修改部门</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="name" placeholder="请输入部门名">
                            <input type="hidden" class="form-control" name="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">排序码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sort_code" placeholder="请输入排序码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">上级部门</label>
                        <div class="col-sm-10">
                            <input type="hidden" class="form-control" name="parent_id">
                            <input type="text" class="form-control" id="parent_name_edit" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-10">
                            <div class="ui-radio ui-radio-primary">
                                <label>
                                    <input type="radio" name="status" value="1">
                                    <span>启用</span>
                                </label>
                                <label>
                                    <input type="radio" name="status" value="0">
                                    <span>禁用</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success">提交</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 全局js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="/static/js/content.js?v=1.0.0"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/plugins/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<script src="/static/plugins/bootstrap-validator/js/language/zh_CN.js"></script>
<!-- treegrid -->
<script src="/static/plugins/treegrid/jquery.treegrid.min.js"></script>
<script src="/static/plugins/treegrid/jquery.treegrid.bootstrap3.js"></script>
<script src="/static/plugins/treegrid/jquery.treegrid.extension.js"></script>
<script src="/static/plugins/treegrid/tree.table.js"></script>
<script>
    var Menu = {
        id: "targetTable",
        table: null,
        layerIndex: -1
    };
    /**
     * 初始化表格的列
     */
    Menu.initColumn = function () {
        var columns = [
            {
                field: 'selectItem',
                radio: true
            },
            {
                field: 'id',
                title: 'ID',
                align: 'center',
                valign: 'middle',
                width: '60px'
            },
            {
                field: 'name',
                title: '部门名称',
                align: 'center',
                valign: 'middle'
            },
            {
                field: 'sort_code',
                title: '排序码',
                align: 'center',
                valign: 'middle'
            },
            {
                field: 'parent_id',
                title: '上级部门名称',
                align: 'center',
                valign: 'middle',
                formatter: function (item, index) {
                    if (item.parent_id == "" || item.parent_id == null) {
                        return '<span>无上级部门</span>';
                    } else {
                        return '<span>' + item.pname + '</span>';
                    }
                }
            },
            {
                field: 'status',
                title: '状态',
                align: 'center',
                formatter: function (item, index) {
                    if (item.status == 0) {
                        return '<span class="label label-danger">禁用</span>';
                    } else if (item.status == 1) {
                        return '<span class="label label-primary">启用</span>';
                    }
                    return "其他";
                }
            },

        ];
        return columns;
    };

    //初始化表格
    $(function () {
        var colunms = Menu.initColumn();
        var table = new TreeTable(Menu.id, "/admin/dept/getList", colunms);
        table.setExpandColumn(2);
        table.setIdField("id");
        table.setCodeField("id");
        table.setParentCodeField("parent_id");
        table.setExpandAll(false);
        table.init();
        Menu.table = table;
        //初始化数据
        addValidator();
        updateValidator();
    });

    function getMenuId() {
        var selected = $('#targetTable').bootstrapTreeTable('getSelections');
        if (selected.length == 0) {
            parent.layer.msg('请选择一条记录', {time: 1500, icon: 5});
            return false;
        } else {
            return selected[0].id;
        }
    }

    //新增按钮
    $("#addeButton").click(function () {
        //清空表单的值
        $("#addForm")[0].reset();
        var selected = $('#targetTable').bootstrapTreeTable('getSelections');
        //单独处理没有父节点时
        if (selected.length == 0) {
            $("#addForm :input[id='parent_name']").val("无上级部门");
            //开启验证
            $("#addForm").data('bootstrapValidator').destroy();
            $('#addForm').data('bootstrapValidator', null);
            addValidator();

            $("#addModal").modal("show");
        } else {
            console.log(JSON.stringify(selected[0]));
            //获取id
            var id = selected[0].id;
            //根据id查询名称
            getDeptById(id);
        }
        //开启验证
        $("#addForm").data('bootstrapValidator').destroy();
        $('#addForm').data('bootstrapValidator', null);
        addValidator();
    });

    //修改按钮
    $("#updateButton").click(function () {
        var selected = $('#targetTable').bootstrapTreeTable('getSelections');
        if (selected.length == 0) {
            parent.layer.msg("请选中一条数据", {time: 1500, icon: 5});
            return;
        }
        var id = selected[0].id;
        //根据id查询名称
        getDeptById1(id);
        //开启验证
        $("#updateForm").data('bootstrapValidator').destroy();
        $('#updateForm').data('bootstrapValidator', null);
        updateValidator();

    });

    //删除
    $("#deleteButton").click(function () {
        var selected = $('#targetTable').bootstrapTreeTable('getSelections');
        if (selected.length == 0) {
            parent.layer.msg("请选中一条数据", {time: 1500, icon: 5});
            return;
        }
        var id = selected[0].id;
        parent.layer.confirm('确定级联删除选中部门吗？', {
            btn: ['确定', '取消'], //按钮
            shade: false //不显示遮罩
        }, function () {
            $.ajax({
                url: "/admin/delete/deleteDept?id=" + id,
                data: {},
                type: "GET",
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        parent.layer.msg(data.msg, {time: 1500, icon: 6}, function () {
                            //刷新列表
                            Menu.table.refresh();
                        });
                    }
                }
            });
        });
    })

    //根据id查询详细信息，修改时
    function getDeptById(id) {
        $.ajax({
            url: "/admin/dept/getDeptById?id=" + id,
            type: "GET",
            dataType: 'json',
            success: function (data) {
                var dept = data[0];
                $("#addForm :input[id='parent_name']").val(dept.name);
                $("#addForm :input[name='parent_id']").val(dept.id);
                $("#addModal").modal("show");
            },
            error: function (data) {

            }
        });
    }

    //根据id查询详细信息，修改时
    function getDeptById1(id) {
        $.ajax({
            url: "/admin/dept/getDeptById?id=" + id,
            type: "GET",
            dataType: 'json',
            success: function (data) {
                var dept = data[0];
                //alert(JSON.stringify(dept[0]))
                //alert(dept[0]['id']);
                for (var item in dept) {
                    if(item!='status' && item!='pname')
                        $("#updateForm :input[name='" + item + "']").val(dept[item]);
                }
                $("#updateForm input[name='status'][value="+dept.status+"]").prop("checked",true);
                $("#updateForm :input[id='parent_name_edit']").val(dept.parent_id==null?"无上级部门":dept.pname);
                console.log(dept.id + "---" + dept.name);
                $("#updateModal").modal("show");
            },
            error: function (data) {

            }
        });
    }

    //新增验证
    function addValidator() {
        $('#addForm').bootstrapValidator({
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '部门名不能为空'
                        },
                        stringLength: {
                            max: 30,
                            message: '部门名长度最多30个字符'
                        },
                    }
                },
                sort_code: {
                    validators: {
                        notEmpty: {
                            message: '排序码不能为空'
                        },
                    }
                },
                status: {
                    validators: {
                        notEmpty: {
                            message: '状态不能为空'
                        },
                    }
                },

            }
        }).on('success.form.bv', function (e) {
            // Prevent form submission
            e.preventDefault();
            //新增提交
            $.ajax({
                url: "/admin/dept/addDept",
                type: "POST",
                data: $("#addForm").serialize(),
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        $("#addModal").modal("hide");
                        parent.layer.msg(data.msg, {time: 1500, icon: 6}, function () {
                            //刷新列表
                            Menu.table.refresh();
                        });

                    }
                },
                error: function (data) {

                }
            });
        })
    }

    //修改验证
    function updateValidator() {
        $('#updateForm').bootstrapValidator({
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '部门名不能为空'
                        },
                        stringLength: {
                            max: 30,
                            message: '部门名长度最多30个字符'
                        },
                    }
                },
                sort_code: {
                    validators: {
                        notEmpty: {
                            message: '排序码不能为空'
                        },
                    }
                },
                status: {
                    validators: {
                        notEmpty: {
                            message: '状态不能为空'
                        },
                    }
                },

            }
        }).on('success.form.bv', function (e) {
            // Prevent form submission
            e.preventDefault();
            //新增提交
            $.ajax({
                url: "/admin/dept/updateDept",
                type: "POST",
                data: $("#updateForm").serialize(),
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        $("#updateModal").modal("hide");
                        parent.layer.msg(data.msg, {time: 1500, icon: 6}, function () {
                            //刷新列表
                            Menu.table.refresh();
                        });

                    }
                },
                error: function (data) {

                }
            });
        })
    }
</script>
</body>
</html>